import React from "react";
import { useAppSelector } from "../../app/hooks";
import logo from "../../logo.svg";
import { Uploader } from "react-vant";
import { useDispatch } from "react-redux";
import { setAvator } from "../../app/user/userSlice";
const Index = () => {
  const avator = useAppSelector((state) => state.user.avator);
  const nickname = useAppSelector((state) => state.user.nickname);
	const dispatch = useDispatch()
  // 实际业务中需要自己实现对应上传逻辑
  const upload = async (file: File) => {
    try {
      const body = new FormData();
      body.append("chunk", file, file.name);

      const resp = await fetch("/api/upload", {
        method: "POST",
        body,
      });
      const json = await resp.json();
      console.log(json);
			dispatch(setAvator(json.data.url))
      // return包含 url 的一个对象 例如: {url:'https://img.yzcdn.cn/vant/sand.jpg'}
      return json.data;
    } catch (error) {
      return { url: `demo_path/${file.name}` };
    }
  };
  return (
    <div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <Uploader upload={upload} previewImage={false}>
          <img
            src={ avator || logo}
            alt=""
            width={200}
            height={200}
            style={{ objectFit: "cover", borderRadius: "50%" }}
          />
        </Uploader>
        <span>{nickname || "未明示"}</span>
      </div>
    </div>
  );
};

export default Index;
